<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>非单文件组件</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue中使用组件的三大步骤：
						一、定义组件(创建组件)
						二、注册组件
						三、编写组件标签

						一、如何定义一个组件(创建组件)？
									使用Vue.extend(options)创建，传入的options和new Vue()时传入的那个options几乎一样，但也有点区别；
									区别如下：
											1.el不要写，为什么？ —————— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
											2.data必须写成函数，为什么？ ———— 避免组件多次复用时，数据存在引用关系
											3.template属性可以配置组件结构
						
						二、如何注册组件？
											1.局部注册：靠new Vue的时候传入components
											2.全局注册：靠Vue.component('组件名',组件)

						三、编写组件标签，有几种写法？
											1.<School></School> -- 推荐
											2.<School/> -- 推荐
											3.<school></school>
											4.<school/>
									备注：若脱离Vue脚手架，则自闭和组件标签有bug

		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<School></School>
			<hr/>
			<Student></Student>
		</div>

		<!-- <div id="root2">
			<School></School>
		</div> -->
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义School组件
		const School = Vue.extend({
			template:`
				<div>
					<h2>学校名：{{name}}</h2>
					<h2>学校地址：{{address}}</h2>
					<h2>班主任：{{teacher}}</h2>
					<button @click="showCheng">点我提示班主任名</button>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'宏福科技园',
					teacher:'程程',
				}
			},
			methods: {
				showCheng(){
					alert(this.teacher)
				}
			},
		})

		//定义Hello组件
		const Hello = Vue.extend({
			template:'<h1>你好啊！</h1>'
		})

		//定义Student组件
		const Student = Vue.extend({
			template:`
				<div>
					<h2>学生名：{{name}}</h2>
					<h2>性别：{{sex}}</h2>
					<h2>身高：{{height}}</h2>
					<Hello></Hello>
				</div>
			`,
			components:{
				Hello
			},
			data(){
				return {
					name:'张三',
					sex:'男',
					height:'172cm'
				}
			}
		})
		
		//注册组件(全局注册)用的较少
		Vue.component('School',School)

		new Vue({
			el:'#root',
			//注册组件(局部注册)用的多
			components:{
				Student
			}
		})

		/* new Vue({
			el:'#root2',
		}) */
	</script>
</html>